<template>
	<div class="addrenwu2">

		<div class="center">

			<div class="right">
		
				<div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
				<div class="powertop">
					<router-link class="powertopli " to="/duanxinlinshi/renwuguanli">任务管理</router-link>
					<router-link class="powertopli powertopact" to="/duanxinlinshi/fasongjilu">指定号码发送短信</router-link>
					<router-link class="powertopli" to="/duanxinlinshi/fasongjilu">发送记录</router-link>
				</div>
				<div class="conlist" v-loading='loading'>

					<el-form ref="form" @submit.native.prevent v-model="form" label-width="120px" class="form">


						<el-form-item label="选择号码方式:">
							<el-radio v-model="renwu.type" @change="renwu.mobile = ''" label="1">按输入号码发送</el-radio>
							<el-radio v-model="renwu.type" @change="renwu.mobile = ''" label="2">按导入号码发送</el-radio>
						</el-form-item>
						<el-form-item label="发送号码:" v-if="renwu.type == 1">
							<el-input v-model="renwu.mobile" type="textarea" :rows="5" placeholder="回车换行,一行一个"></el-input>
						</el-form-item>

						<el-form-item label="导入号码:" v-if="renwu.type == 2">
							<div class="flex">
								<upload-excel-component @on-selected-file="exportData" buttonName="上传文件"></upload-excel-component>
								<div style="margin-left: 20px; color: #0074D9;" v-if="renwu.mobile != ''">已上传{{renwu.mobile.length}}个手机号</div>
								<div style="margin-left: 20px;" v-if="renwu.mobile == ''">请上传文件</div>
								<el-button type="text"  style="margin-left: 20px;" @click="xiazai">模板下载</el-button>
							</div>
						</el-form-item>
						<el-form-item label="短信签名:">
							<el-radio v-model="renwu.sign" v-for="item in qianminglist" :key="item.id" :label="item.id">{{item.name}}</el-radio>
							<el-tooltip class="item" effect="light" content="您可联系我们提交相关资料，我们帮您申请您专属的签名" placement="top">
								<span class="wenhao">?</span>
							</el-tooltip>
							<el-button type="primary" size="mini" style="float: right; position: relative; top: 10px;" @click="showsign = true">申请签名</el-button>

						</el-form-item>
						<el-form-item label="短信内容:">
							<div class="shuru">
								<div class="shurutop">已输入<span class="red">{{zishu}}</span>个字，共计<span class="red">{{tiaoshu}}</span>条短信。
									<el-tooltip class="item" effect="light" content="70字记一条短信费，超出70字则以67字每条计费。" placement="top">
										<span style="color: #8E65B7; cursor: pointer;">计费规则</span>
									</el-tooltip>
								</div>
								<el-input type="textarea" @input="jishu" :rows="5" placeholder="请输入内容" v-model="renwu.content"></el-input>
							</div>

						</el-form-item>

						<el-form-item label=" ">
							<div class="wenxin">
								<p>温馨提示： </p>
								<p>1) 请留意短信内的敏感字词，例如：联通、电信、移动等可能导致短信被运营商拦截。 </p>
								<p>2) 短信内容包含：特卖、优惠、限时等营销词语可能会被手机安全软件拦截。 </p>
								<p>3) 发送网址请确保前后已加空格否则可能导致手机端网址无法打开。</p>
							</div>
						</el-form-item>
					</el-form>
					<div class="flexm" style="margin-left: 100px;">
						<el-button type="danger" size="medium" @click="chuangjian" :disabled="ing">{{chuangjianw}}</el-button>
						<span class="red" style="margin: 0 20px; font-size: 14px;">当前剩余：{{duanxintiaoshu}}条</span>
						<router-link to="/duanxin/duanxinchongzhi">充值短信</router-link>
					</div>

				</div>
			</div>
		</div>
		<el-dialog title="申请签名" :visible.sync="showsign" :close-on-press-escape="false" :close-on-click-modal="false" width="600px">
			<div>
				<el-form ref="form" @submit.native.prevent v-model="form" label-width="120px" class="form">
					<el-form-item label="申请签名名称：">
						<el-input v-model="signname"></el-input>
					</el-form-item>
					<el-form-item label="称呼：">
						<el-input v-model="signxingming"></el-input>
					</el-form-item>
					<el-form-item label="手机号：">
						<el-input v-model="signmobile"></el-input>
					</el-form-item>
					<el-form-item label="">
						注：我们将会在48小时内联系您，准备好相关资料后申请
					</el-form-item>

				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showsign = false">取 消</el-button>
				<el-button type="primary" @click="addsign">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="添加来源" :visible.sync="laiyuanshow" :close-on-press-escape="false" :close-on-click-modal="false"
		 width="600px">
			<div>
				<el-form ref="form" @submit.native.prevent v-model="form" class="form">
					<el-form-item>
						<el-input v-model="tuiguanglaiyuan.source" style="width: 250px;" placeholder="来源分类：例：“PDD”或“新媒体”"></el-input>
						-
						<el-input v-model="tuiguanglaiyuan.name" style="width: 250px;" placeholder="来源名称：例：”百度、搜狗”等"></el-input>

					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="laiyuanshow = false">取 消</el-button>
				<el-button type="primary" @click="tianjia" >确 定</el-button>
			</span>
		</el-dialog>
		<!-- <foot></foot> -->
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import duanxinci from '../../../public/duanxin'
	import UploadExcelComponent from "@/components/UploadExcel/index.vue";
	import moment from "moment";
	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot,
			UploadExcelComponent
		},
		name: "addrenwu2",
		data() {
			return {
				laiyuanshow: false,
				signname: "",
				signxingming: "",
				signmobile: "",
				chuangjianw: "立即发送",
				id: "",
				loading: false,
				form: "",
				renwu: {
					type: '1',
					mobile: [],
					content: "",
					sign: 1
				},
				ing:false,
				sourcelist: "",
				qianminglist: [],
				zishu: "0",
				tiaoshu: "1",
				shoplist: "",
				duanxintiaoshu: "",
				showsign: false,
				photo: false,
				daunxinci: '',
				tuiguanglaiyuan: {
					source: "",
					name: ""
				}
			}
		},
		created() {

			this.getsign();
			this.getmessagenumbers()

		},
		mounted() {

		},
		methods: {
			xiazai:function(){
				const a = document.createElement('a');
				a.setAttribute('download', '上传手机号.xlsx');
				a.setAttribute('href', window.location.origin+"/91haoka_platform/"+'static/shangchuanshoujihao.xlsx');
				a.click();
			},
			exportData(data) {

				var that = this;
				var list = []

				//导入的导入修改数据
				if (data.header[0] == "手机号") {
					for (let i in data.results) {
						list.push(data.results[i]['手机号'])
					}
					this.renwu.mobile = list
					console.log(this.renwu.mobile)
				}
			},


			//申请签名
			addsign: function() {
				var that = this
				axios.post('/api/plan-market/message/addsign', {
						signname: this.signname,
						signxingming: this.signxingming,
						signmobile: this.signmobile
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.$message.success('已申请，请等待联系');
							that.signname = ''
							that.signxingming = ''
							that.signmobile = ''
							that.showsign = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},

			//获取短信剩余条数
			getmessagenumbers: function() {
				this.ing = true
				var that = this
				axios.get('/api/plan-market/message/getmessagenumbers')
					.then(response => {
						if (response.data.msg.code == 0) {
							that.duanxintiaoshu = response.data.data.message_recharge
							that.ing = false
						} else {
							that.$message.error(response.data.msg.info);
							that.ing = false
						}
					})
			},


			//创建任务
			chuangjian: function() {

				if (this.renwu.type == 1 && this.renwu.mobile != '') {
					this.renwu.mobile = this.renwu.mobile.split(/\n/)
					for(let i in this.renwu.mobile){
					  this.renwu.mobile[i] = this.renwu.mobile[i].trim()
					}
				}

				var that = this

				var params = {};

				params['mobiles'] = this.renwu.mobile;
				params['sign'] = this.renwu.sign;
				params['content'] = this.renwu.content;

				axios.post("/api/plan-market/message/messages_send", params)
					.then(function(response) {
						if (response.data.msg.code == 0) {
							that.$message.success('发布成功');
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},

			//获取签名
			getsign: function() {
				var that = this;
				axios.get('/api/plan-market/message/getsign')
					.then(response => {
						if (response.data.msg.code == 0) {
							that.qianminglist = response.data.data
							if (that.qianminglist == '') {
								that.renwu.sign = ''
							}
						} else {
							if (response.data.msg.code == 50401) {
								that.$router.push({
									path: "/login"
								});
								return false
							}
							that.$message.error(response.data.msg.info);
						}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addrenwu2 {
		margin: 0;
		padding: 0;
		background: #EFEFEF;
		
		.powertop {
			display: flex;
			width: 640px;
		}
#drop .el-button--primary {
    background-color: #EEF7FF;
    border: 1px #EEF7FF solid;
    padding: 8px 20px !important;
  }
		.powertopli {
			flex-basis: 160px;
			line-height: 45px;
			border-top: 4px #EBECEF solid;
			color: #727272;
			border-right: 1px #EAEAEA solid;
			font-size: 14px;
			text-align: center;
		}

		.powertopact {
			background: #FFFFFF;
			border-top: 4px #DD2727 solid;
		}

		.center {
			width: 1366px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.right {
				flex-basis: 1166px;
				background: #EBECEF;

				.conlist {
					padding-bottom: 20px;
					background: #FFFFFF;
					min-height: 800px;

					.addrenwutitle {
						text-align: center;
						line-height: 50px;
						font-weight: bold;
						font-size: 16px;
						border-bottom: 1px #EAEAEA solid;
					}

					.form {
						padding: 20px;

						.el-input {
							width: 300px;
						}
					}

					.flex {
						display: flex;
						flex-wrap: wrap;

						.el-select {
							margin-bottom: 20px;
						}

						label {
							display: block;
							width: 100%;
						}

						.el-input__icon {
							height: auto !important;
						}
					}

					.shuru {
						border: 1px #C8C9CC solid;

						.shurutop {
							background: #EAEAEA;
							padding-left: 20px;
							color: #666
						}

						.el-textarea {
							padding: 10px 5px;

							textarea {
								border: 0;
								outline: 0;
								width: 98%;
							}
						}

					}

					.red {
						color: #f00;
						font-weight: bold;
						margin: 0 5px;
						font-size: 18px;
					}

					.flexm {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.wenxin {
						background: #DDDDDD;
						padding: 10px 20px;
						color: #646464;
						line-height: 20px;
					}

					.wenhao {
						background: #DDDDDD;
						color: #FFFFFF;
						line-height: 15px;
						cursor: pointer;
						padding: 5px 11px;
						margin-left: 20px;
						text-align: center;
						border-radius: 14px;
					}
				}
			}
		}
	}
</style>
